<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" type="text/css" charset="utf-8"/>
				<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
		</style>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav"></span>
                                                        返回
           </button>
			<h1 class="mui-title">编辑</h1>
						<button id="paizhao" class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right">
                <span class="mui-icon mui-icon-right-nav"></span>
                                                        拍照
           </button>
		</header>
		<div class="mui-content">
			
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/lunbo/yuantiao.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/lunbo/shuijiao.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/lunbo/muwu.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/lunbo/cbd.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">Color of SIP CBD</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/lunbo/yuantiao.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/lunbo/shuijiao.jpg" data-preview-src="" data-preview-group="1">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			
							<form class="mui-input-group">
								<div class="mui-input-row">
									<label>基站名称</label>
									<input type="text" placeholder="普通输入框">
								</div>
								<div class="mui-input-row">
									<label>位置</label>
									<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
								</div>
		
								<div class="mui-input-row mui-plus-visible">
									<label>详情</label>
									<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
								</div>
								<div class="mui-button-row">
									<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
									<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
								</div>
							</form>
		        <div id="dcontent" class="dcontent">
					<ul id="history" class="dlist" style="text-align:left;">
				        <li id="empty" class="ditem-empty">无照片记录</li>
			        </ul>
			        <br/>
		        <div class="button button-waring" onclick="cleanHistory();">清空历史记录</div>
		        </div>
				<div id="output">
                   Camera管理摄像头设备，可用于拍摄照片、录制视频文件。
		        </div>
		        
		
		</div>
		
		
		
		<script src="../../js/mui.min.js"></script>
			<script src="../../js/mui.zoom.js"></script>
	<script src="../../js/mui.previewimage.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/immersed.js" ></script>
		<script type="text/javascript">
			mui.init();
			mui.previewImage();
			var i=1,gentry=null,w=null;
			var hl=null,le=null,de=null,ie=null;
			var unv=true;
			
			
			function plusReady(){
				plus.io.resolveLocalFileSystemURL( "_doc/", function ( entry ) {
					entry.getDirectory( "camera", {create:true}, function ( dir ) {
						gentry = dir;
						updateHistory();
					}, function ( e ) {
						outSet( "Get directory \"camera\" failed: "+e.message );
					} );
				}, function ( e ) {
					outSet( "Resolve \"_doc/\" failed: "+e.message );
				} );
			}
			if(window.plus){
				plusReady(); 
			}else{
				document.addEventListener("plusready",plusReady,false);
			}
			// 监听DOMContentLoaded事件
			document.addEventListener("DOMContentLoaded",function(){
				// 获取DOM元素对象
				hl=document.getElementById("history");
				le=document.getElementById("empty");
				de=document.getElementById("display");
				if(ie=document.getElementById("index")){
					ie.onchange=indexChanged;
				}
				// 判断是否支持video标签
				unv=!document.createElement('video').canPlayType;
			},false );
			function changeIndex() {
				ie.focus();
			}
			function indexChanged() {
				de.innerText = ie.options[ie.selectedIndex].innerText;
				i = parseInt( ie.value );
				outLine( de.innerText ); 
			}
			
	        document.getElementById('paizhao').addEventListener('tap', function() { 
				var cmr = plus.camera.getCamera();
				cmr.captureImage( function ( p ) {
					outLine( "成功："+p );
					plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
						createItem( entry );
					}, function ( e ) {
						outLine( "读取拍照文件错误："+e.message );
					} );
				}, function ( e ) {
					outLine( "失败："+e.message );
				}, {filename:"_doc/camera/",index:1} );
	        });
	        
	        function displayFile( li ) {
				if ( w ) {
					outLine( "重复点击！" );
					return;
				}
				if ( !li || !li.entry ) {
					ouSet( "无效的媒体文件" );
					return;
				}
				var name = li.entry.name;
				var suffix = name.substr(name.lastIndexOf('.'));
				var url = "";
				if ( suffix==".mov" || suffix==".3gp" || suffix==".mp4" || suffix==".avi" ){
					//if(unv){plus.runtime.openFile("_doc/camera/"+name);return;}
					url = "camera.html";
				} else {
					url = "camera.html";
				}
				w=plus.webview.create(url,url,{hardwareAccelerated:true,scrollIndicator:'none',scalable:true,bounce:"all"});
				w.addEventListener( "loaded", function(){
					w.evalJS( "loadMedia('"+li.entry.toLocalURL()+"')" );
					//w.evalJS( "loadMedia(\""+"http://localhost:13131/_doc/camera/"+name+"\")" );
				}, false );
				w.addEventListener( "close", function() {
					w = null;
				}, false );
				w.show( "pop-in" );
			}
	        
			// 添加播放项
			function createItem( entry ) {
				var li = document.createElement("li");
				li.className = "ditem";
				li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
				li.setAttribute( "onclick", "displayFile(this);" );
				hl.insertBefore( li, le.nextSibling );
				li.querySelector(".aname").innerText = entry.name;
				li.querySelector(".ainf").innerText = "...";
				li.entry = entry;
				updateInformation( li );
				// 设置空项不可见
				le.style.display = "none";
			}
			// 获取录音文件信息
			function updateInformation( li ) {
				if ( !li || !li.entry ) {
					return;
				}
				var entry = li.entry;
				entry.getMetadata( function ( metadata ) {
					li.querySelector( ".ainf" ).innerText = dateToStr( metadata.modificationTime );
				}, function ( e ) {
					outLine( "获取文件\""+entry.name+"\"信息失败："+e.message );
				} );
			}
			// 获取录音历史列表
			function updateHistory() {
				if ( !gentry ) {
					return;
				}
			  	var reader = gentry.createReader();
			  	reader.readEntries( function ( entries ) {
			  		for ( var i in entries ) {
			  			if ( entries[i].isFile ) {
			  				createItem( entries[i] );
			  			}
			  		}
			  	}, function ( e ) {
			  		outLine( "读取录音列表失败："+e.message );
			  	} );
			}
			// 清除历史记录
			function cleanHistory() {
				hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
				le = document.getElementById( "empty" );
				// 删除音频文件
				outSet( "清空拍照录像历史记录：" );
				gentry.removeRecursively( function () {
					// Success
					outLine( "成功！" );
				}, function ( e ) {
					outLine( "失败："+e.message );
				});
			}
		</script>
	</body>

</html>